<template>
    <div class="box">
        <div class="box-item">
<div class="left">
        <div class="toggle">
            <i class="el-icon-s-fold" @click="toggle"></i>
            <el-breadcrumb separator="/">
            <el-breadcrumb-item v-if="breadcrumb.length==0">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-else v-for="(item,index) in breadcrumb" :key="index">{{item.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
    </div>
    <div class="right">
        123
    </div>
        </div>
        <div>

        <el-scrollbar class="tab-box">

            <div class="tag-group">
            <template v-for="(item,index) in tagNavMenu">
                <el-tag
                    :key="index"
                    size="small"
                    :type="item.type"
                    :effect="item.effect" @click="handleClick(item)" :closable="item.label!='首页'"  @close="handleClose(item)">
                    {{ item.label }}
                </el-tag>
            </template>
            
            </div>
        </el-scrollbar>
        </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
      }
    },
    methods:{
        toggle(){
            this.$store.commit('toggle');
        },
        handleClose(item) {
            this.tagNavMenu.splice(this.tagNavMenu.indexOf(item), 1);

            var tag= this.tagNavMenu[this.tagNavMenu.length-1];
            tag.effect='dark';
            this.$router.push(tag.path);
        },
        handleClick(item) {

            this.tagNavMenu.forEach((e)=>{
                if(e.label!==item.label){
                    e.effect='plain';
                }
            })

            item.effect='dark';

            this.$router.push(item.path);
        }
    },
    computed:{
        breadcrumb(){
            return this.$store.state.breadcrumb;
        },
        tagNavMenu(){
            return this.$store.state.tagNavMenu;
        }
    },
    watch:{
        breadcrumb(){
            console.log(this.$store.state.breadcrumb);
        }
    }
}
</script>

<style scoped>
.tab-box{
    padding: 10px;
    white-space: nowrap;
    overflow: hidden;
    height: 30px;
}
.box-item{
        display: flex;
        align-items: center;
        padding:10px;
        background: #fff;
        box-shadow: 0 0 2px gray;
    }
    .left{
        flex:1;
    }
    .right{
        flex:1;
        display: flex;
        justify-content: flex-end;
        padding-right:20px;
    }
    .toggle{
        cursor: pointer;
        display: flex;
        align-items: center;
    }
    .toggle>i{
        margin-right:10px ;
    }
    .el-tag{
        margin-right:10px;
    }
</style>